﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Seabroad Container Lines (Tianjin) Co. Ltd.</title>
<!--<script type="text/javascript" src="js/jquery.js"></script>-->
<!--<script type="text/javascript" src="js/interface.js"></script>-->
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="js/fisheye_circle.js" type="text/javascript"></script>
    <script src="js/iutil.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />


<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
 
<link href="css/style_circle.css" rel="stylesheet" type="text/css" />
 
		<script type="text/javascript">
		    $(document).ready(function () {
		        $('.boxgrid.slidedown').hover(function () {
		            $(".cover", this).stop().animate({ top: '-260px' }, { queue: false, duration: 300 });
		        }, function () {
		            $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
		        });
		        //Horizontal Sliding
		        $('.boxgrid.slideright').hover(function () {
		            $(".cover", this).stop().animate({ left: '325px' }, { queue: false, duration: 300 });

		        }, function () {
		            $(".cover", this).stop().animate({ left: '0px' }, { queue: false, duration: 300 });
		        });
		        //Diagnal Sliding
		        $('.boxgrid.thecombo').hover(function () {
		            $(".cover", this).stop().animate({ top: '130px', left: '135px' }, { queue: false, duration: 300 });
		        }, function () {
		            $(".cover", this).stop().animate({ top: '0px', left: '0px' }, { queue: false, duration: 300 });
		        });
		        //Partial Sliding (Only show some of background)
		        $('.boxgrid.peek').hover(function () {
		            $(".cover", this).stop().animate({ top: '130px' }, { queue: false, duration: 160 });
		        }, function () {
		            $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 160 });
		        });

		    });
		</script>
</head>
 
<body>
 		
<div id="box_main">
  <div id="box_form">
            
<div class="boxgrid thecombo">
	  <p> <a href="http://www.seabroad.cn/2.htm" target="_blank"><img class="simg" src="images/company2.png"/></a></p>
     <img class="cover" src="images/company1.gif"/>     </div>
<div class="boxgrid thecombo">
            <p><a href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><img class="simg" src="images/finance2.png"/></a></p>
			<img class="cover" src="images/finance1.gif"/>	</div>
<div class="boxgrid thecombo">
     <p> <a href="http://www.seabroad.cn/12_e.htm" target="_blank"><img  class="simg" src="images/japb2.png"/></a></p>
	  <img class="cover" src="images/japb1.gif"/></div>
<div class="boxgrid thecombo">
			 <p> <a href="http://www.seabroad.cn/Jxlsc/Page/login.aspx" target="_blank"><img   class="simg" src="images/order2.png"/></a></p>
			  <img class="cover" src="images/order1.gif"/>	</div>
            
<div class="boxgrid thecombo">
				<p><a href="http://www.seabroad.cn/cq/index_e.asp" target="_blank"><img  class="simg"  src="images/fee2.png"/></a></p>
                <img class="cover" src="images/fee1.gif"/>	</div>
<div class="boxgrid thecombo">
           <p> <a href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><img  class="simg"  src="images/business2.png"/></a></p>
			<img class="cover" src="images/business1.gif"/>	</div>
<div class="boxgrid thecombo">
      <p><a href="http://www.seabroad.cn/6_e.htm" target="_blank"><img  class="simg" src="images/japp2.png"/></a></p>
	  <img class="cover" src="images/japp1.gif"/></div>
<div class="boxgrid thecombo">
			  <p><a href="http://www.seabroad.cn/55_e.htm" target="_blank"><img  class="simg"  src="images/job2.png" /></a></p>
			  <img class="cover" src="images/job1.gif"/>	</div>
            
<div class="boxgrid thecombo">
				<p><a href="http://www.seabroad.cn/3_e.htm" target="_blank"><img class="simg"  src="images/contact2.png"/></a></p>
                <img class="cover" src="images/contact1.gif"/>	</div>
<div class="boxgrid thecombo">
            <p><a href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><img  class="simg" src="images/member2.png"/></a></p>
			<img class="cover" src="images/member1.gif"/>	</div>
<div class="boxgrid thecombo">
     <p> <a href="http://www.seabroad.cn/13_e.htm" target="_blank"><img  class="simg" src="images/korea2.png"/></a></p>
	  <img class="cover" src="images/korea1.gif"/></div>
<div class="boxgrid thecombo">
			<p>  <a href="http://www.seabroad.cn/18_e.htm" target="_blank"><img  class="simg"  src="images/join2.png"/></a></p>
			  <img class="cover" src="images/join1.gif"/>	</div>
</div>
 
 
</div> 
            
<!--bottom dock -->

 
<!--<div class="dock" id="dock2">
  <div class="dock-container2">
  <span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a class="dock-item2" href="#" ><span>Language</span><img src="images/lang.png" /></a></span>
  <a class="dock-item2" href="http://www.seabroad.cn/2.htm" target="_blank"><span>Profile</span><img src="images/companyb.png" /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><span>Sign up</span><img src="images/memberb.png"  /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/12_e.htm" target="_blank"><span>JP base-ports</span><img src="images/japbb.png"  /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/6_e.htm" target="_blank"><span>JP monor ports</span><img src="images/jappb.png"  /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/13_e.htm" target="_blank"><span> KR ports</span><img src="images/koreab.png"  /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/cq/index_e.asp" target="_blank"><span>Freight & Schedule</span><img src="images/feeb.png" /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><span>Reconciliation</span><img src="images/financeb.png" /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><span>Sign on reciept</span><img src="images/businessb.png" /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/Jxlsc/Page/login.aspx" target="_blank"><span>E-Booking</span><img src="images/orderb.png"  /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/55_e.htm" target="_blank"><span>Online recruiment</span><img src="images/jobb.png"  /></a>
    <a class="dock-item2" href="http://www.seabroad.cn/18_e.htm" target="_blank"><span>Join us</span><img src="images/joinb.png"  /></a> 
  <a class="dock-item2" href="http://www.seabroad.cn/3_e.htm" target="_blank"><span>Contact Us</span><img src="images/contactb.png" /></a>  </div>
</div>-->
 
 <div class="dock" id="dock2">
  <div class="dock-container2"  >
       <div class="dock-item2">
            <a  href="#" class="language" ><span>Language</span><img src="images/lang.png" /></a>
       </div> 
	  <div class="dock-item2"> 
          <a href="http://www.seabroad.cn/2.htm" target="_blank">
            <span>Profile</span><img src="images/companyb.png" alt="Profile" />
          </a> 
      </div>
	  <div class="dock-item2"> 
	        <a  href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><span>Sign up</span><img src="images/memberb.png" alt="Sign up" /></a> 
      </div>
	  <div class="dock-item2"> 
	        <a  href="http://www.seabroad.cn/12_e.htm" target="_blank"><span>JP base-ports</span><img src="images/japbb.png"  /></a> 
      </div>
	  <div class="dock-item2"> 
	       <a  href="http://www.seabroad.cn/6_e.htm" target="_blank"><span>JP monor ports</span><img src="images/jappb.png"  /></a> 
      </div>
	  <div class="dock-item2">  
	        <a  href="http://www.seabroad.cn/13_e.htm" target="_blank"><span> KR ports</span><img src="images/koreab.png"  /></a> 
      </div>
	  <div class="dock-item2"> 
	        <a href="http://www.seabroad.cn/cq/index_e.asp" target="_blank"><span>Freight & Schedule</span><img src="images/feeb.png" /></a> 
      </div>
	  <div class="dock-item2">  
	        <a  href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><span>Reconciliation</span><img src="images/financeb.png" /></a>
      </div>
	  <div class="dock-item2">  
	        <a  href="http://www.seabroad.cn/sys/index_e.asp" target="_blank"><span>Sign on reciept</span><img src="images/businessb.png" /></a> 
      </div > 
	  <div class="dock-item2">  
	        <a href="http://www.seabroad.cn/Jxlsc/Page/login.aspx" target="_blank"><span>E-Booking</span><img src="images/orderb.png"  /></a> 
      </div> 
	  <div class="dock-item2">  
	        <a   href="http://www.seabroad.cn/55_e.htm" target="_blank"><span>Online recruiment</span><img src="images/jobb.png"  /></a>
      </div > 
	  <div class="dock-item2">  
	         <a  href="http://www.seabroad.cn/18_e.htm" target="_blank"><span>Join us</span><img src="images/joinb.png"  /></a> 
      </div >
	  <div class="dock-item2">
          <div class="drop-menu">            
            <div class="drop-menu-item movedown">
	            <span>Next</span><a href="#" ><img src="images/2.png" alt="contact" /></a>
            </div>
            <div class="drop-menu-item">
	            <span>Portfolio</span><a  href="#"><img src="images/portfolio.png" alt="portfolio" /></a>
            </div>
            <div class="drop-menu-item">
	            <span>Portfolio</span><a  href="#"><img src="images/portfolio.png" alt="portfolio" /></a>
            </div>
            <div class="drop-menu-item">
	            <span>Music</span><a href="#"><img src="images/portfolio.png" alt="music"/></a>
            </div> 
            <div class="drop-menu-item">
	            <span>Contact</span><a href="#" ><img src="images/email.png" alt="contact" /></a>
            </div>
            <div class="drop-menu-item">
	            <span>Music</span><a href="#"><img src="images/portfolio.png" alt="music"/></a>
            </div> 
            <div class="drop-menu-item">
	            <span>Music</span><a href="#"><img src="images/portfolio.png" alt="music"/></a>
            </div> 
            <div class="drop-menu-item">
	            <span>Microsoft</span><a href="http://www.Microsoft.com" target="_blank"><img src="images/portfolio.png" alt="music"/></a>
            </div> 
            <div class="drop-menu-item">
	            <span>Google</span><a href="http://www.google.com" target="_blank"><img src="images/portfolio.png" alt="music"/></a>
            </div> 
            <div class="drop-menu-item moveup">
	            <span>Next</span><a href="#" ><img src="images/2.png" alt="contact" /></a>
            </div>
          </div>
	         <a  href="http://www.seabroad.cn/3_e.htm" target="_blank"><span>Contact Us</span><img src="images/contactb.png" /></a>
      </div> 
  </div> 
</div>
 
 
 
<div id="massage_box"><div class="massage">
<div class="header" onmousedown=MDown(massage_box)><span onClick="$('#massage_box').css('visibility','hidden'); $('#mask').css('visibility','hidden') " style="float:right; display:inline; cursor:hand">×</span>
</div>
<table  bgcolor="#D5E2FA" width=390px><tr><td><a href="http://www.seabroad.cn/cn" ><img  border=0 src="images/cn.png" /></a></td><td><a href="http://www.seabroad.cn/jp"><img src="images/jp.png" border=0/></a></td><td><a href="http://www.seabroad.cn/kr"><img src="images/ko.png" border=0 /></a></td></tr></table>
</div></div>
<div id="mask"></div>
         <!--实现层移动-->
<script language="javascript">
    //var Obj=''
    //document.onmouseup=MUp
    //document.onmousemove=MMove

    //function MDown(Object){
    //Obj=Object.id
    //document.all(Obj).setCapture()
    //pX=event.x-document.all(Obj).style.pixelLeft;
    //pY=event.y-document.all(Obj).style.pixelTop;
    //}

    //function MMove(){
    //if(Obj!=''){
    //  document.all(Obj).style.left=event.x-pX;
    //  document.all(Obj).style.top=event.y-pY;
    //  }
    //}

    //function MUp(){
    //if(Obj!=''){
    //  document.all(Obj).releaseCapture();
    //  Obj='';
    //  }
    //}
    massage_box_left = (document.body.clientWidth - 350) / 2 + "px";
    //alert(document.getElementById("massage_box").style.left );
    document.getElementById("massage_box").style.left = massage_box_left;
    //alert(document.getElementById("massage_box").style.left );
    massage_box_top = (document.documentElement.clientHeight - 200) / 2 + "px";
    massage_box_height = document.documentElement.clientHeight + "px";
    massage_box_width = document.documentElement.clientWidth + "px";
    document.getElementById("massage_box").style.top = massage_box_top;
    document.getElementById("mask").style.width = massage_box_width;
    document.getElementById("mask").style.height = massage_box_height;
</script>
         
            
<!--bottom dock -->

 <style type="text/css">
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:none}
body{filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden} 

#massage_box{ position:absolute;   width:390px; height:200px;background-color:LightGray; z-index:2; visibility:hidden} 

#mask{ position:absolute; top:0; left:0; width:250px; height:130px; background:#fff; filter:ALPHA(opacity=50); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1px 1px 3px 1px;  background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#D5E2FA; height:30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3px 5px 0px 5px; color:#000}
</style>

<script>
    document.getElementById("mask").style.width = massage_box_width;
    document.getElementById("mask").style.height = massage_box_height;
</script>

<!--dock menu JS options -->
<script type="text/javascript">
    $(document).ready(
		function () {
		    $('#dock2').Fisheye(
				{
				    maxWidth: 60,    //设置底部菜单的变化的最大宽度
				    items: '.dock-item2', //底部菜单
				    itemsText: 'a > span',    //底部菜单的描述文字
				    container: '.dock-container2',  //底部菜单的容器
				    itemWidth: 60,        //底部菜单的初始化大小
				    proximity: 80,        //底部菜单的一个变化半径
				    alignment: 'left',    //底部菜单对齐方式
				    valign: 'bottom',     //底部菜单是停靠在窗口上边沿还是下边沿（默认上边沿）
				    halign: 'center',     //底部菜单左右居中对齐
				    dropMenu: '.drop-menu', //弹出菜单容器
				    dropMenuItem: '.drop-menu-item', //弹出菜单项
				    dropMenuRadius: 700,       //弹出菜单弯曲半径
				    radiusDirection: 'right', //弹出菜单弯曲半径方向 "left" or "right"
				    duration: 40,            //弹出菜单弹出的时间
				    delay: 40,              //弹出菜单延迟
				    moveup: '.moveup',       //弹出菜单中向上收起的菜单
				    movedown: '.movedown',   //弹出菜单中向下收起的菜单
				    popupWidth: 50,          //弹出菜单相宽度
				    maxMenuItemCount: 6,      //弹出菜单相最大个数（多余这个数目，就有向上收起和向下收起）
				    popupHoverBorder: 'none' //'solid 1px red' 弹出菜单中菜单相图片边框样式
				}
			)
		    $(".language").click(function () {
		        $("#mask").css('visibility', 'visible');
		        $("#massage_box").css('visibility', 'visible');
		    });
		}
	);
 
</script>
 
</body>
</html>

